<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-outline-black {
            color: black;
            background-color: transparent;
            background-image: none;
            border-color: black;
            border-radius: 30px !important;
        }

        .button-group {
            display: flex;
            gap: 5%;

        }
    </style>
</head>
<body>

<div class="container" style="width: 400px;margin-top: 10%">
    <form method="post"><label class="form-label">登录</label>
        <div class="mb-3">
            <label class="form-label">用户名</label>
            <label>
                <input class="form-control form-control-rounded mb-2" name="username" size="20" type="text">
            </label>
            <div class="input-icon"><label class="form-label">密码</label>
                <label>
                    <input class="form-control form-control-rounded" name="password" size="21" type="password">
                </label>
            </div>
        </div>
        <div class="button-group">
            <input class="btn btn-lg btn-outline-black" id="login" type="submit" value="登录"/>
            <input class="btn btn-lg btn-outline-black" type="reset" value="重置"/>
        </div>
    </form>
    <div id="message"></div>
    <div class="form-foot"><h5>如果还未注册，点击<a id="register" href="ClientRegister.html">此处</a>注册</h5></div>
</div>

<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js" type="text/javascript"></script>

<script>
    $(document).ready(function () {
        console.log("begin");

        function oneValues() {
            let result = "";
            const url = window.location.search; //获取url中"?"符后的字串
            if (url.indexOf("?") !== -1) {
                result = url.substring(url.indexOf("=") + 1, url.length);
            }
            return result;
        }

        // 找到id为register的元素
        const element = document.getElementById("register");
// 设置href属性
        element.href = oneValues().charAt(0).toUpperCase() + oneValues().slice(1)+"Register.html";

        $("#login").click(function (e) {
            e.preventDefault();
            const username = $("input[name='username']").val();
            const password = $("input[name='password']").val();
            const user = oneValues();

            $.ajax({
                url: "LoginServlet",
                method: "post",
                data: {
                    user: user,
                    username: username,
                    password: password
                },
                dataType: "json",
                success: function (result) {
                    if (result.msg === "success") {
                        if (user === "client") {
                            window.location.href = "ClientMain.html";
                        }
                        if (user === "assistant") {
                            window.location.href = "AssistantMain.html";
                        }
                        console.log(result.message);
                    } else {
                        $('#message').text('登录失败，请稍后重试');
                    }
                },
                error: function () {
                    $('#message').text('服务未连接');
                }
            });
        });
    });
</script>
</body>
</html>
